<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <!--        1-->
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10"/>
          <div class="d-flex jc-center">
            <dv-decoration-8 :color="decorationColor" class="dv-dec-8"/>
            <dv-decoration-8
                :color="decorationColor"
                :reverse="true"
                class="dv-dec-8"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s"/>
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="img_logo1">
              <img alt="" src="../assets/departmentLogo.png">
            </div>

            <div class="img_logo2">
              <div class="time_box">
                <div class="react-right mr-4 react-l-s time">
                  <span class="react-after"></span>
                  <span class="text">{{ dateYear }}&emsp;{{ dateWeek }}&emsp;{{ dateDay }}</span>
                </div>
                <dv-decoration-6 style="width:500px;height:30px;"/>
              </div>
            </div>
            <div class="img_logo3">
              <img alt="" src="../assets/spark_logo.png">
            </div>
          </div>

        </div>

        <div class="body-box">
          <div class="left_box">
            <dv-border-box-13 style="height: 18%">
              <left_top :arriveRate="arriveRate" :arriveStu="arriveStu"/>
            </dv-border-box-13>
            <dv-border-box-13 style="height: 71%">
              <!--              :tem="meg.data1.Air_temperature" :humi="meg.data1.Air_humidity" :ill="meg.data1.Air_illuminance" :carbon="meg.data1.Air_carbon_dioxide" :pressure="meg.data1.Air_pressure" :windSpeed="meg.data2.Wind_speed" :windDirection="meg.data2.Wind_direction"-->
              <left_down/>
            </dv-border-box-13>
          </div>
          <div class="center_box">
            <dv-border-box-13 style="height: 50%">
              <centerTop/>
            </dv-border-box-13>
            <dv-border-box-13 style="height: 49%">
              <centerDown :collage="collageList" :number="numberList"/>
            </dv-border-box-13>
          </div>
          <div class="right_box">
            <dv-border-box-13 style="height: 40%">
              <rightTop :imgSrc="imgSrc" :userInfo="userInfo.userInfo"/>
            </dv-border-box-13>
            <dv-border-box-13 style="height: 49%">
              <right-down :majorNumber="majorNumber"/>
            </dv-border-box-13>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as log from "sass";

const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();
import drawMixin from "../utils/drawMixin";
import {formatTime} from '../utils/index.js'
// import centerLeft1 from './centerLeft1'
// import centerLeft2 from './centerLeft2'
// import centerRight1 from './centerRight1'
// import centerRight2 from './centerRight2'
import left_top from './left_top'
import left_down from "./left_down";
import centerTop from './centerTop'
import centerDown from "./centerDown"
import rightTop from './rightTop'
import RightDown from "./rightDown";

export default {
  mixins: [drawMixin],
  data() {
    return {
      BASE_URL: '',
      imgSrc: '',
      userInfo: {},
      collageList: [],
      numberList: [],
      arriveStu: 0,
      stuSum: 633,
      arriveRate: 0,
      meg: {},
      time: true,
      outTime: null,
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      decorationColor: ['#568aea', '#000000'],

      majorNumber: []


    }
  },
  components: {

    left_top,
    left_down,
    centerTop,
    centerDown,
    rightTop,
    RightDown
  },
  mounted() {


    //获取时间
    this.timeFn()
    //加载结束
    this.cancelLoading()
    this.BASE_URL = process.env.VUE_APP_BASE_URL
    setInterval(() => {
      this.axios.get('/test', {headers: {"If-Modified": "0", "Cache-Control": "no-cache"}}).then(
          response => {
            this.userInfo = response.data
            this.majorNumber = response.data.Status
            this.imgSrc = this.BASE_URL + response.data.src;
            this.arriveStu = 0;
            for (let i = 0; i < this.majorNumber.length; i++) this.arriveStu += this.majorNumber[i].value;
            // console.log(this.arriveStu)
            this.arriveRate = (this.arriveStu * 100 / this.stuSum);
            let status = this.userInfo.userInfo.status
            if (status === '0') {
              let test = `欢迎${this.userInfo.userInfo.stuname}加入信息工程学院！`
              this.speek(test)
            }
            if (status === "1") {
              if (this.time) {
                let test = `${this.userInfo.userInfo.stuname}你已经报到成功了，祝你前程似锦`
                this.speek(test)
                this.time = false;
                setTimeout(() => this.time = true, 10000)
              }
            }
          },
          error => {
            // console.log(error)
          }
      ).catch((err) => {
        console.log(err)
      })
    }, 800)

  },
  beforeDestroy() {
    clearInterval(this.timing)
  },
  methods: {
    speek(test) {
      msg.text = test; // 文字内容: 小朋友，你是否有很多问号
      msg.lang = "zh-CN"; // 使用的语言:中文
      msg.volume = 1; // 声音音量：1
      msg.rate = 1; // 语速：1
      msg.pitch = 1; // 音高：1
      synth.speak(msg); // 播放
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    },


  },
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/index.scss';
</style>
